(function () {
    // 定义初始页数
    let pageid = 0

    // 请求获取总页数
    fetch('http://chst.vip:1234/api/getmoneyctrl?pageid')
        .then(response => {
            return response.json()
        }).then(data => {
            // let res = data.result
            // console.log(res);
            // 计算总页数
            let pages = Math.ceil(data.totalCount / data.pagesize)
            console.log(pages);

            // 渲染 select 列表
            let options = '';
            for (let i = 0; i < pages; i++) {
                options += `
                    <option>${i + 1}/${pages}</option>
                `;
            }
            $('.page').html(options);

            // 判断如果 只有一页 都禁用
            if (pages == 1) $('.next').prop('disabled', true)

            // 添加点击事件
            $('.next').on("click", function (e) {
                pageid++;
                // 阻止 button 默认刷新页面
                e.preventDefault();

                $('.prev').prop('disabled', false)
                $('.page option').eq(pageid).prop('selected', true).siblings().prop('selected', false)
                console.log(pageid);
                getProduct(pageid)
                if (pageid >= pages - 1) return $('.next').prop('disabled', true);

            });

            $('.prev').on('click', function (e) {
                pageid--;
                // 阻止 button 默认刷新页面
                e.preventDefault();

                $('.next').prop('disabled', false)
                $('.page option').eq(pageid).prop('selected', true).siblings().prop('selected', false)
                console.log(pageid);
                getProduct(pageid);

                // 判断禁用按钮
                if (pageid == 0) return $('.prev').prop('disabled', true);

            });

            // select 添加 change 事件
            $('.page').on('change', function () {
                pageid = this.value.split('/')[0].trim() - 1
                console.log(pageid);
                getProduct(pageid);
                if (pageid >= pages - 1) {
                    $('.prev').prop('disabled', false);
                    return $('.next').prop('disabled', true);
                }
                if (pageid == 0) {
                    $('.next').prop('disabled', false);
                    return $('.prev').prop('disabled', true);
                }
            })

        });

    getProduct(pageid)


    // 封装渲染商品函数
    function getProduct(pageid) {
        fetch('http://chst.vip:1234/api/getmoneyctrl?pageid=' + pageid)
            .then(response => {
                return response.json()
            }).then(data => {
                let res = data.result
                console.log(res);
                let regExp = /(?<=imgurl=)[^'"]*/;
                let ele = ''
                res.forEach(item => {
                    let img = regExp.exec(item.productImgSm)[0];
                    ele += `
                <li>
                    <a href="discount.html?productid=${item.productId}">
                        <div class="left">
                            <img src="${img}" alt="">
                        </div>
                        <div class="right">
                            <h4>${item.productName}</h4>
                            <div class="other">
                                <span class="mall">${item.productFrom} | ${item.productTime}</span>
                                <em class="fr">
                                    <i class="iconfont icon-xiaoxi"></i>
                                    <span>${item.productComCount}</span>
                                </em>
                            </div>
                        </div>
                    </a>
                </li>
                `
                });
                $('#product').html(ele);
            });
    }

})();